<template>
    <header class="musicDetail-top">
        <img :src="musicList.al.picUrl" alt="" class="musicDetail-Bg"/>
        <span class="Detail-left iconfont" @click="updateDetailShow">&#xe625;</span>
        <div class="detail-content">
            <Vue3Marquee class="detail-name">{{musicList.al.name}}</Vue3Marquee>
            <div class="detail-author" v-for="item in musicList.ar" :key="item">{{item.name}}  ></div>
        </div>
        <span class="Detail-right iconfont">&#xe626;</span>
    </header>
    <div class="musicDetail-content" v-show="!isLyricShow">
        <img src="@/assets/1.jpg.png" alt="" class="detail-radio">
        <div class="content-circle">
            <div class="circle-bbg"></div>
            <div class="circle-bg"></div>
            <!-- circle_img_active:!isbtnShow,circle_img_paused:isbtnShow -->
            <img :src="musicList.al.picUrl" alt="" class="circle-img" @click="isLyricShow=true" :class="{ circle_img_active:!isbtnShow,circle_img_paused:isbtnShow}">
        </div>
    </div>
    <div class="musicLyric" ref="musicLyric" v-show="isLyricShow"  @click="isLyricShow=false">
        <p v-for="item in lyric" :key="item" :class="{active:(currentTime *1000 >= item.time && currentTime*1000 < item.pre)}">
        {{item.lrc}}
        </p>
    </div>
    <div class="musicDetail-footer">
        <span class="detail-icon iconfont">&#xe8ab;</span>
        <span class="detail-icon iconfont">&#xe8bc;</span>
        <span class="detail-icon iconfont">&#xe683;</span>
        <span class="detail-icon iconfont">&#xe602;</span>
        <span class="detail-icon iconfont">&#xf202;</span>
    </div>
    <div class="Online">
        <input type="range" class="range" min="0" :max="duration" v-model="currentTime" step="0.05">
    </div>
    <div class="lastfooter">
        <span class="last-icon iconfont">&#xea75;</span>
        <span class="last-icon iconfont" @click="goPlay(-1)">&#xe78a;</span>
        <span class="Last-icon iconfont" @click="play" v-if="isbtnShow">&#xe624;</span>
        <span class="Last-icon iconfont" @click="play" v-else>&#xe662;</span>
        <span class="last-icon iconfont" @click="goPlay(1)">&#xe7a5;</span>
        <span class="last-icon iconfont">&#xea72;</span>
    </div>
</template>

<script>
import { Vue3Marquee } from 'vue3-marquee'
import 'vue3-marquee/dist/style.css'
import { mapMutations,mapState } from 'vuex'
export default {
    data() {
        return {
            isLyricShow: false
        }      
    },
    computed: {
        ...mapState(['lyricList','currentTime','playListIndex','playList','duration']),
        lyric: function () {
            let arr;
            if (this.lyricList.lyric) {
                arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item) => {
                    let min = item.slice(1, 3);
                    let sec = item.slice(4, 6);
                    let mill = item.slice(7, 10);
                    let lrc = item.slice(11, item.length);
                    let time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
                    if (isNaN(Number(mill))) {
                        mill = item.slice(7, 9);
                        lrc = item.slice(10, item.length)
                        time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill);
                    }
                    return { min, sec, mill, lrc, time}
                })
                arr.forEach((item, i) => {
                    if (i===arr.length-1 || isNaN(arr[i+1].time)) {
                        item.pre=0
                    } else {
                        item.pre=arr[i+1].time
                    }
                });
            }
            console.log(arr)
            return arr
        }       
    },
    mounted(){
        // console.log(this.lyricList.lyric);
        this.addDuration();
    },
    props: ['musicList','play','isbtnShow','addDuration'],
    methods: {
        goPlay: function (num) {
            let index = this.playListIndex + num
            if (index < 0) {
                index = this.playList.length-1
            } else if (index == this.playList.length) {
                index = 0
            }
            this.updatePlayListIndex(index)
        },
        ...mapMutations(['updateDetailShow', 'updatelyricList','updatePlayListIndex','updateDuration'])
    },
    watch: {
        currentTime: function () {
            let p = document.querySelector("p.active");
            let scroll = document.querySelector(".musicLyric");
            if (p && p.offsetTop > 300) {
                this.$refs.musicLyric.scrollTop = p.offsetTop - 300
            }
        }    
    },
    components: {
        Vue3Marquee,
    }
}
</script>

<style lang="less" scoped>
.musicDetail-top{
    display: flex;
    width: 100%;
    height: 1.5rem;
    .musicDetail-Bg{
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: -99;
        filter:blur(70px);
    }
    .Detail-left{
        margin: .5rem .4rem;
        font-size: .5rem;
        color: #fff;
    }
    .detail-content{
        width: 70%;
        .detail-name{
            width: 3rem;
            margin-top: .4rem;
            font-size: .3rem;
            color: #fff;
        }
        .detail-author{
            color: #ccc;
            font-size: .25rem;
        }
    }
    .Detail-right{
        margin: .5rem .4rem;
        font-size: .5rem;
        color: #fff;
    }
}
.musicDetail-content{
    position: relative;
    width: 100%;
    height: 8.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .detail-radio{
        position: absolute;
        left: 3.5rem;
        height: 3rem;
        transform-origin: 0 0;
        transform: rotate(-25deg);
        transition: all 2s;
    }
    .content-circle{
        width: 100%;
        .circle-bbg{
            position: absolute;
            left: 15%;
            bottom: 2.6rem;
            width: 5rem;
            height: 5rem;
            background-color: #808080;
            border-radius: 50%;
        }
        .circle-bg{
            position: absolute;
            left: 17%;
            bottom: 2.75rem;
            width: 4.7rem;
            height: 4.7rem;
            background-color: #000;
            border-radius: 50%;
        }
        .circle-img{
            position: absolute;
            left: 26%;
            bottom: 3.45rem;
            width: 3.3rem;
            height: 3.3rem;
            margin-top: 2rem;
            border-radius: 50%;
            animation: rotate_ar 10s linear infinite;
        }
        .circle_img_active{
            animation-play-state: running;
        }
        .circle_img_paused{
            animation-play-state: paused;
        }
        @keyframes rotate_ar {
            0%{
                transform: rotateZ(0deg);
            }
            100%{
                transform: rotateZ(360deg);
            }  
        }
    }
}
.musicLyric{
    width: 100%;
    height: 8.8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    overflow: scroll;
    p{
        color: rgba(255,255,255,.6);
        margin-bottom: 15px;
        font-size: .28rem;
    }
    .active{
        color: #fff;
        font-size: .4rem;
    }
}
.musicDetail-footer{
    display: flex;
    width: 100%;
    height: 1rem;
    margin-top: .3rem;
    color: rgba(255,255,255,.8);
    justify-content: space-around;
    .detail-icon{
        font-size: .55rem;
    }   
}
.Online{
    width: 100%;
    input[type=range]{
        background-color: rgba(255,255,255,.8);
        width: 100%;
        height: 0.06rem;        
    }
}
.lastfooter{
    display: flex;
    width: 100%;
    height: 1rem;
    color: rgba(255,255,255,.8);
    justify-content: space-around;
    .last-icon{
        margin-top: .5rem;
        font-size: .5rem;
    }
    .Last-icon{
        margin-top: .3rem;
        font-size: .9rem;
    }
}

</style>


